<template>
    <div class="order">
            <div class="order_item">
                <el-image
                style="width: 100px; height: 100px"
                :src="orederData.service_img"
                fit="fit">
                </el-image>
                <div class="order_content">
                    <p>
                        <span class="iconfont">&#xe60f;</span>
                        <span>设备：</span>
                        <el-tag  effect="dark">{{ orederData.service_name }}</el-tag>
                    </p>
                    <p>
                        <span class="iconfont">&#xe62c;</span>
                        <span>故障：</span>
                        <el-tag type="warning" effect="dark">{{ orederData.failure }}</el-tag>
                    </p>
                </div>
                <div class="order_content">
                    <p>
                        <span class="iconfont">&#xe602;</span>
                        <span>工程师：</span>
                        <el-tag type="info" effect="dark">
                            {{orederData.maintainer_id ? orederData.nickname : '待接单'}}
                        </el-tag>
                    </p>
                    <p>
                        <span class="iconfont">&#xe8a2;</span>
                        <span>上门时间：</span>
                        <el-tag type="info" effect="dark">
                            {{ orederData.appointmentDate +' '+ orederData.startTime + '-' + orederData.endTime  }}
                        </el-tag>
                    </p>
                </div>
                <div class="order_status">
                    <el-tag type="danger" effect="dark" >
                        <span class="iconfont">&#xe8ae;</span>
                        {{ orederData.order_status }}
                    </el-tag>
                </div>
                <div class="btn">
                    <el-button type="primary" @click="viewOrder(orederData.id)">
                    <span class="iconfont">&#xe600;</span> 查看订单</el-button>
                </div>
            </div>
          </div>
</template>

<script>
import '@/assets/font/iconfont.css'
export default {
  props: ['orederData'],
  data () {
    return {
    }
  },
  methods: {
    viewOrder (id) {
      this.$router.push({
        path: '/user/orderinfo',
        query: {
          id: id
        }
      })
    }

  }

}
</script>

<style lang="less" scoped>
 .order{
        background-color: transparent;
        .order_item{
            margin: 20px auto;
            padding: 10px 20px;
            height: 120px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #000;
            border-radius: 5px;
            .order_content{
                // margin-left: 20px;
                p{
                    font-size: 14px;
                }
            }
        }
    }
</style>
